<template>
  <view class="content">
    <view class="tap-box">
      <view class="tap-list">
        <view :class="tapIndex===-1?'tap-item-hover':''" class="tap-item" @click="setTapIndex(-1)">消息中心</view>
        <view :class="tapIndex===0?'tap-item-hover':''" class="tap-item" @click="setTapIndex(0)">我关注的</view>
        <view :class="tapIndex===1?'tap-item-hover':''" class="tap-item" @click="setTapIndex(1)">我参与的</view>
      </view>
    </view>
    <!--    <loading-circle v-if="loading"></loading-circle>-->
    <view class="list" v-show="tapIndex===-1">
      <member-message ref="memberMessage"></member-message>
    </view>
    <scroll-view scroll-y class="list" @scrolltolower="end" v-show="tapIndex===0">
      <view class="follow-list">
        <view class="topic-box" :class="item.myOrder>1?'topic-box-hover':''" v-for="(item,index) in list"
              @click="toDetails(item.id,item.hashRead?1:0,index)">
          <view class="topic-top">
            <view class="image">
              <image mode="aspectFill" :src="item.thumb"></image>
              <view v-if="item.hashRead" class="newMessage">新评</view>
            </view>
            <view class="topic-info">
              <view class="title">
                <text>{{ item.title }}</text>
                <view v-if="item.followed===1" class="icon" @click.stop="showOperation(item,index)">
                  <uni-icons size="28" color="#828283" type="more-filled"></uni-icons>
                </view>
                <view v-if="item.followed===0" class="icon button" @click.stop="setTopicFollow(1,index)">
                  <uni-icons color="#00C141" type="plusempty"></uni-icons>
                  关注
                </view>
              </view>
              <view class="tag" v-if="item.cateNames">
                <text v-for="text in item.cateNames.split('、')">{{ text }}</text>
              </view>
              <view class="source">来自：{{ item.parentCateNames }}</view>
            </view>
          </view>
          <view class="desc">{{ item.introduction }}</view>
        </view>
      </view>
      <view class="recommendation-list" v-show="recommendationListShow">
        <popular></popular>
      </view>
      <view style="height: 200upx;"></view>
    </scroll-view>
    <scroll-view scroll-y class="list" @scrolltolower="end" v-show="tapIndex===1">
      <view class="follow-list">
        <view class="topic-box" v-for="(item,index) in list" @click="toDetails(item.id,item.hashRead?2:0,index)">
          <view class="topic-top">
            <view class="image">
              <image mode="aspectFill" :src="item.thumb"></image>
              <view v-if="item.hashRead" class="newMessage2"></view>
            </view>
            <view class="topic-info">
              <view class="title">
                <text>{{ item.title }}</text>
                <view v-if="item.followed===1" class="icon" @click.stop="showOperation(item,index,1)">
                  <uni-icons size="28" color="#828283" type="more-filled"></uni-icons>
                </view>
                <view v-if="item.followed===0" class="icon button" @click.stop="setTopicFollow(1,index)">
                  <uni-icons color="#00C141" type="plusempty"></uni-icons>
                  关注
                </view>
              </view>
              <view class="tag" v-if="item.cateNames">
                <text v-for="text in item.cateNames.split('、')">{{ text }}</text>
              </view>
              <view class="source">来自：{{ item.parentCateNames }}</view>
            </view>
          </view>
          <view class="desc">{{ item.introduction }}</view>
        </view>
      </view>
      <view style="height: 200upx;"></view>
    </scroll-view>
  </view>
</template>

<script>
import popular from "@/pages/circle/components/popular.vue";
import MemberMessage from "@/pages/circle/components/memberMessage.vue";

export default {
  components: {MemberMessage, popular},
  data() {
    return {
      tapIndex: -1,
      image_hosts: this.image_host + 'quanzi/',
      postData: {
        page: 1,
        pageSize: 10
      },
      list: [],
      total: 0,
      tIndex: "",
      recommendationListShow: false,
      loading: false
    };
  },
  created() {
    this.getMyFollowTopic()
  },
  methods: {
    showOperation(item, index, type = 0) {
      this.tIndex = index
      let array = []
      if (type === 0) {
        array = [1, item.myOrder > 1 ? 3 : 2];
      } else {
        array = [1]
      }
      this.$emit('showOperation', array)
    },
    clickId(id) {
      if (id === 1) {
        this.setTopicFollow(0, this.tIndex)
      } else if (id === 2) {
        this.setFollowTopicTop(1)
      } else if (id === 3) {
        this.setFollowTopicTop(0)
      }
    },
    // 取消关注
    async setTopicFollow(followType, index) {
      let url = 'circle/customer/topic/setTopicFollow?topicId=' + this.list[index].id + '&followType=' + followType
      let {data} = await this.$javaCircle.doRequest("post", url, '', '', false)
      if (data.code !== 0) {
        uni.showToast({title: data.message, icon: "none"})
        return
      }
      this.list[index].followed = followType
    },
    // 置顶｜取消置顶
    async setFollowTopicTop(toTop) {
      let url = 'circle/customer/topic/setFollowTopicTop?topicId=' + this.list[this.tIndex].id + '&toTop=' + toTop;
      let {data} = await this.$javaCircle.doRequest("post", url, '', '', false)
      if (toTop === 1) {
        this.list[this.tIndex].myOrder++
        let data = this.list[this.tIndex]
        this.list.splice(this.tIndex, 1)
        this.list.unshift(data)
      } else {
        this.list[this.tIndex].myOrder = 1
        let data = this.list[this.tIndex]
        this.list.splice(this.tIndex, 1)
        this.list.push(data)
      }
    },
    setTapIndex(index) {
      if (index === 'all') {
        index = this.tapIndex
        this.$refs.memberMessage.init()
      }
      this.tapIndex = index;
      this.postData.page = 1;
      this.total = 0
      index === 0 ? this.getMyFollowTopic() : this.getMyJoinTopic()
      this.loading = true
      setTimeout(() => {
        this.loading = false
      }, 2000)
    },
    async getMyFollowTopic() {
      let postData = this.postData;
      let {data} = await this.$javaCircle.doRequest("post", 'circle/customer/topic/getMyFollowTopic', postData, 'json', false)
      this.total = data.data.total;
      let list = postData.page === 1 ? [] : this.list
      this.list = list.concat(data.data.list.map(item => {
        item.cateNames = item.cateNames.substring(0, 14)
        return item
      }))
      if (this.total >= this.list.length - 1) {
        this.recommendationListShow = true
      }
      this.$nextTick(() => {
        this.loading = false
      })
    },
    async getMyJoinTopic() {
      let postData = this.postData;
      let {data} = await this.$javaCircle.doRequest("post", 'circle/customer/topic/getMyJoinTopic', postData, 'json', false)
      this.total = data.data.total;
      let list = postData.page === 1 ? [] : this.list
      this.list = list.concat(data.data.list.map(item => {
        item.cateNames = item.cateNames.substring(0, 14)
        return item
      }))
      this.$nextTick(() => {
        this.loading = false
      })

    },
    toDetails(id, type = 0, index) {
      this.list[index].hashRead = false
      uni.navigateTo({url: "/pages/circle/details/details?id=" + id + '&type=' + type})
    },
    end() {
      if (this.total > this.postData.page * this.postData.pageSize) {
        this.postData.page++
        this.tapIndex === 0 ? this.getMyFollowTopic() : this.getMyJoinTopic()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #54B174;
  box-sizing: border-box;
}

.tap-box {
  width: 100%;
  height: 117upx;
  background-color: #fff;
  border-radius: 20upx 20upx 0 0;
  display: flex;
  align-items: center;
  justify-content: center;

  .tap-list {
    width: 702upx;
    height: 77upx;
    display: flex;
    border-radius: 5upx;
    box-sizing: border-box;
    border: 2upx solid #54B174;

    .tap-item {
      flex: 1;
      line-height: 77upx;
      text-align: center;
      font-size: 34upx;
      color: #666666;
    }

    .tap-item-hover {
      border-radius: 5upx;
      background-color: #54B174;
      color: #fff;
      font-size: 38upx;
      font-weight: 500;
    }
  }
}

.list {
  flex: 1;
  background-color: #F1F2F6;
  overflow: auto;
}

.follow-list {
  margin-bottom: 20upx;

  .topic-info {
    .title {
      width: 527upx !important;
      display: flex !important;
      align-items: center;

      text {
        width: 80%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }

      .icon {
        margin-left: auto;
      }
    }
  }

  .desc {
    border-bottom: 1upx solid #D8D8D8;
    padding-bottom: 30upx;
  }
}

.topic-box {
  background-color: #fff;
  box-sizing: border-box;
  padding: 30upx;
  padding-bottom: 0upx;
  position: relative;

  .topic-top {
    width: 100%;
    display: flex;

    .image {
      width: 140upx;
      height: 140upx;
      border-radius: 8upx;
      background-color: #666666;
      margin-right: 20upx;
      position: relative;

      image {
        width: 100%;
        height: 100%;
        border-radius: 8upx;
      }

      .newMessage {
        position: absolute;
        width: 80upx;
        height: 38upx;
        color: #fff;
        text-align: center;
        line-height: 38upx;
        background-color: #F33F02;
        border-radius: 100upx 0 0 100upx;
        right: 0;
        top: 94upx;
      }

      .newMessage2 {
        position: absolute;
        width: 24upx;
        height: 24upx;
        top: -10upx;
        right: -10upx;
        background-color: #F33F02;
        border-radius: 50%;
      }
    }

    .topic-info {
      flex: 1;

      .title {
        width: 490upx;
        font-size: 42upx;
        color: #000;
        font-weight: 500;
        margin-bottom: 8upx;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }

      .tag {
        width: 490upx;
        overflow: hidden;
        white-space: nowrap;
        margin-bottom: 8upx;

        text {
          background-color: #F1FAF3;
          color: #6AAC80;
          font-size: 30upx;
          box-sizing: border-box;
          padding: 0 8upx;
          border-radius: 8upx;
          margin-right: 12upx;
        }
      }

      .tag::after {
        content: "...";
        display: inline-block;
        background-color: #F1FAF3;
        width: 0;
        color: #6AAC80;
      }

      .userCount {
        font-size: 28upx;
        color: #999999;
      }
    }
  }

  .source {
    width: 400upx;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 28upx;
    color: #999999;
    margin-top: 12upx;
  }

  .button {
    position: absolute;
    //width: 190upx;
    //height: 68upx;
    border-radius: 39upx;
    //background-color: #54B174;
    //color: #fff;
    //line-height: 68upx;
    //text-align: center;
    //font-size: 36upx;
    //font-weight: 500;
    right: 20upx;
    top: 30upx;
    width: 122rpx;
    height: 54rpx;
    line-height: 54rpx !important;
    text-align: center;
    background-color: #C9EFD6;
    color: #54B174;
    font-size: 28rpx;
  }

  .desc {
    width: 100%;
    font-size: 38upx;
    color: #666666;
    margin-top: 18upx;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .buttons {
    width: 100%;
    border-top: 1upx solid #D8D8D8;
    height: 98upx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 31upx;

    .button-item {
      width: 30%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 26upx;
      color: #666;

      image {
        width: 52upx;
        height: 52upx;
      }
    }
  }
}

.topic-box-hover {
  background-color: #F1F2F6;
}

</style>
